<template>
  <div class="supplier-registration-page">
    <div class="page-header">
      <h2 class="page-title">{{ displayTitle }}</h2>
      <!--      <p class="page-subtitle">请填写以下信息完成供应商加盟采集报名</p>-->
    </div>

    <div class="registration-card">
      <el-form 
        ref="registrationForm" 
        :model="formData" 
        :rules="formRules" 
        label-width="120px"
        class="registration-form"
      >
        <div class="form-section">
          <div class="section-header">
            <i class="el-icon-office-building"></i>
            <span>基本信息</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="供应商名称" prop="supplierName">
                <el-input 
                  v-model="formData.supplierName" 
                  placeholder="请输入供应商全称"
                  clearable
                >
                  <i slot="prefix" class="el-input__icon el-icon-office-building"></i>
                </el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input 
                  v-model="formData.phone" 
                  placeholder="请输入联系人电话"
                  clearable
                >
                  <i slot="prefix" class="el-input__icon el-icon-phone"></i>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="项目名称" prop="project">
            <el-input 
              v-model="formData.project" 
              placeholder="请输入参与项目名称"
              clearable
            >
              <i slot="prefix" class="el-input__icon el-icon-collection"></i>
            </el-input>
          </el-form-item>
          
          <el-form-item label="擅长标注类型" prop="expertiseType">
            <el-input 
              v-model="formData.expertiseType" 
              placeholder="请输入擅长的标注类型"
              clearable
            >
              <i slot="prefix" class="el-input__icon el-icon-star-off"></i>
            </el-input>
          </el-form-item>
        </div>

        <div class="form-section">
          <div class="section-header">
            <i class="el-icon-user"></i>
            <span>人力配置</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="总人力" prop="totalManpower">
                <el-input-number 
                  v-model="formData.totalManpower" 
                  :min="0" 
                  :max="1000"
                  placeholder="请输入总人力数量"
                  style="width: 100%"
                ></el-input-number>
                <span class="unit">人</span>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="分割人力" prop="segmentedManpower">
                <el-input-number 
                  v-model="formData.segmentedManpower" 
                  :min="0" 
                  :max="1000"
                  placeholder="请输入分割人力数量"
                  style="width: 100%"
                ></el-input-number>
                <span class="unit">人</span>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="3D点云人力" prop="pointCloudManpower">
                <el-input-number 
                  v-model="formData.pointCloudManpower" 
                  :min="0" 
                  :max="1000"
                  placeholder="请输入3D点云人力数量"
                  style="width: 100%"
                ></el-input-number>
                <span class="unit">人</span>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="车道线人力" prop="laneLineManpower">
                <el-input-number 
                  v-model="formData.laneLineManpower" 
                  :min="0" 
                  :max="1000"
                  placeholder="请输入车道线人力数量"
                  style="width: 100%"
                ></el-input-number>
                <span class="unit">人</span>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="周内报道人数" prop="weeklyReportedCount">
            <el-input-number 
              v-model="formData.weeklyReportedCount" 
              :min="0" 
              :max="1000"
              placeholder="请输入周内报道人数"
              style="width: 100%"
            ></el-input-number>
            <span class="unit">人</span>
          </el-form-item>
        </div>

        <div class="form-actions">
          <el-button 
            type="primary" 
            @click="submitForm" 
            :loading="submitLoading"
            size="medium"
          >
            <i class="el-icon-upload"></i>
            提交报名信息
          </el-button>
          <el-button @click="resetForm" size="medium">
            <i class="el-icon-refresh"></i>
            重置表单
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  submitSupplierRegistrationAPI
} from '@/api/supplierRegistration';

export default {
  name: 'SupplierRegistration',
  data() {
    return {
      defaultTitle: '供应商加盟采集报名',
      submitLoading: false,
      userId: null, // 从URL获取的用户ID
      formData: {
        supplierName: '',
        phone: '',
        project: '',
        expertiseType: '', // 擅长标注类型
        totalManpower: null,
        segmentedManpower: null,
        pointCloudManpower: null,
        laneLineManpower: null, // 车道线人力
        weeklyReportedCount: null
      },
      formRules: {
        supplierName: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        project: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        expertiseType: [
          { required: true, message: '请输入擅长的标注类型', trigger: 'blur' }
        ],
        totalManpower: [
          { required: true, message: '请输入总人力数量', trigger: 'blur' }
        ],
        segmentedManpower: [
          { required: true, message: '请输入分割人力数量', trigger: 'blur' }
        ],
        pointCloudManpower: [
          { required: true, message: '请输入3D点云人力数量', trigger: 'blur' }
        ],
        laneLineManpower: [
          { required: true, message: '请输入车道线人力数量', trigger: 'blur' }
        ],
        weeklyReportedCount: [
          { required: true, message: '请输入周内报道人数', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    displayTitle() {
      // 优先使用路由参数中的标题
      if (this.$route.query.title) {
        return decodeURIComponent(this.$route.query.title);
      }
      
      // 默认标题
      return this.defaultTitle;
    }
  },
  mounted() {
    // 获取URL中的userId参数
    console.log('当前路由查询参数:', this.$route.query);
    const userId = this.$route.query.userId;
    if (userId) {
      this.userId = userId;
      console.log('获取到的userId:', this.userId);
    } else {
      console.log('未找到userId参数');
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.registrationForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          
          // 准备提交数据，如果存在userId则包含在内
          const submitData = { ...this.formData };
          console.log('当前userId值:', this.userId);
          if (this.userId) {
            submitData.userId = this.userId;
            console.log('提交数据中包含userId:', submitData.userId);
          }
          
          console.log('准备提交的数据:', submitData);
          
          // 调用后端接口提交数据
          submitSupplierRegistrationAPI(submitData).then(res => {
            this.submitLoading = false;
            if (res.code === 200) {
              this.$message.success('报名信息提交成功！');
              this.resetForm();
            } else {
              this.$message.error(res.message || '提交失败');
            }
          }).catch(error => {
            this.submitLoading = false;
            this.$message.error('提交失败，请检查网络连接');
            console.error('提交错误:', error);
          });
        } else {
          this.$message.warning('请完善表单信息');
          return false;
        }
      });
    },
    
    // 重置表单
    resetForm() {
      this.$refs.registrationForm.resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.supplier-registration-page {
  background: #f0f2f5;
  min-height: calc(100vh - 84px);
  padding: 20px;
  
  .page-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
    
    .page-title {
      margin: 0 0 10px 0;
      font-size: 28px;
      color: #1890ff;
      font-weight: 500;
    }
    
    .page-subtitle {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }
  
  .registration-card {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
    
    .form-section {
      margin-bottom: 30px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .section-header {
        font-size: 18px;
        color: #303133;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;
        
        i {
          color: #1890ff;
          margin-right: 8px;
        }
      }
      
      .unit {
        margin-left: 5px;
        color: #909399;
      }
    }
    
    .form-actions {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid #e4e7ed;
      
      .el-button {
        margin: 0 10px;
        padding: 12px 30px;
      }
    }
  }
  
  ::v-deep .el-form-item {
    margin-bottom: 22px;
    
    .el-form-item__label {
      color: #606266;
      font-weight: 500;
    }
    
    .el-input__inner {
      height: 40px;
      line-height: 40px;
    }
    
    .el-input-number {
      width: 100%;
      
      .el-input__inner {
        text-align: left;
      }
    }
  }
  
  ::v-deep .el-row {
    margin-bottom: 0 !important;
  }
}
</style>